<template>
  <div class="file-add-page-container">
    <mu-paper class="upload-paper" :z-depth="0">
    <el-upload
      ref="upload"
      class="upload-plugin"
      drag
      action="#"
      multiple
      :auto-upload="false"
      :file-list="fileList"
      :http-request="httpRequest"
      >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    </mu-paper>
    <div class="file-add-page-footer">
      <mu-divider style="margin-bottom: 6px;"></mu-divider>
    <mu-button color="blue" @click="goBack()">
      <mu-icon value=":fa fa-long-arrow-left" size="20"></mu-icon><span style="font-family: 微软雅黑;">&nbsp;返回</span>
    </mu-button>
    <mu-button color="green" @click="save()">
      <mu-icon value=":fa fa-floppy-o" size="20"></mu-icon><span style="font-family: 微软雅黑;">&nbsp;保存</span>
    </mu-button>
    </div>
  </div>
</template>

<script>
  export default {
    name:'file-add-page',
    data() {
      return {
        fileList: []
      };
    },
    methods:{
      goBack(){
        this.$router.push("/list/file");
      },
      save(){
        this.$refs.upload.submit();
      },
      httpRequest(item){
        let file = item.file;
        // 对file_share数组进行insert操作
        this.$db.read().get('file_share').insert({
          fileName: file.name,
          filePath: file.path,
        }).write();
        this.$toast.success("保存成功");
      }
    }
  }
</script>

<style>
  .file-add-page-container{
    width: 100%;
    padding: 10px;
  }
  .upload-plugin {
      width: 360px;
      border-width: 2px;
      border-color: #000000;
      margin: 0 auto;
  }
  .upload-paper{
    margin-top: 120px;
    height: 220px;
  }
  
  .file-add-page-footer{
    margin-top: 165px;
    padding-top: 5px;
    border-color: darkgrey;
    border-top-width: 2px;
  }
</style>
